<template>
	<view class="page">

		<view class="ques_content">
			<view class="header">
				<view class="ques_subject">
					{{quesData.quesSubject}}
					<text v-if="quesData.quesSubject.length<3">测评</text>
				</view>
				<view class="ques_subject1" @click="quesNext">
					下一题
				</view>
				<view class="ques_gold">

					<text class="gold_text">{{userSurplusNum}}</text>
					<image src="../../static/image/gold.png" class="image"></image>

				</view>
			</view>

			<view class="title">

				<view class="big">{{quesData.quesTitle}}</view>
				<view class="content" v-html="quesData.quesContent">

				</view>
			</view>
		</view>

		<view class="ques_option" v-if="quesData.quesOpa">
			<view class="select">请选择</view>

			<view class="mainBox">
				<!-- <view class="userHeard cu-avatar lg round" style="background-image:url(http://cdn.zhoukaiwen.com/logo.png);"></view> -->
				<view>
					<view style="" class="answers">
						<view @click="Toggle('A')" class="mentalList" :class="{ mentalListActive: selected === 'A' }">
							<view class="indexBox" v-if="quesData.quesOpa">A</view>
							<view class="indexContent">{{ quesData.quesOpa || '' }}</view>
						</view>
						<view @click="Toggle('B')" class="mentalList" v-if="quesData.quesOpb"
							:class="{ mentalListActive: selected === 'B' }">
							<view class="indexBox text-shadow">B</view>
							<view class="indexContent">{{ quesData.quesOpb || '' }}</view>
						</view>
						<view @click="Toggle('C')" class="mentalList" v-if="quesData.quesOpc"
							:class="{ mentalListActive: selected === 'C' }">
							<view class="indexBox text-shadow">C</view>
							<view class="indexContent">{{ quesData.quesOpc || '' }}</view>
						</view>
						<view @click="Toggle('D')" class="mentalList" v-if="quesData.quesOpd"
							:class="{ mentalListActive: selected === 'D' }">
							<view class="indexBox text-shadow">D</view>
							<view class="indexContent">{{ quesData.quesOpd || '' }}</view>
						</view>
						<view @click="Toggle('E')" class="mentalList" v-if="quesData.quesOpe"
							:class="{ mentalListActive: selected === 'E' }">
							<view class="indexBox text-shadow">E</view>
							<view class="indexContent">{{ quesData.quesOpe || '' }}</view>
						</view>
						<view @click="Toggle('F')" class="mentalList" v-if="quesData.quesOpf"
							:class="{ mentalListActive: selected === 'F' }">
							<view class="indexBox text-shadow">F</view>
							<view class="indexContent">{{ quesData.quesOpf || '' }}</view>
						</view>
						<view @click="Toggle('G')" class="mentalList" v-if="quesData.quesOpg"
							:class="{ mentalListActive: selected === 'G' }">
							<view class="indexBox text-shadow">G</view>
							<view class="indexContent">{{ quesData.quesOpg|| '' }}</view>
						</view>
						<view @click="Toggle('H')" class="mentalList" v-if="quesData.quesOph"
							:class="{ mentalListActive: selected === 'H' }">
							<view class="indexBox text-shadow">H</view>
							<view class="indexContent">{{ quesData.quesOph || '' }}</view>
						</view>

					</view>

				</view>
			</view>
		</view>

		<view class="answer">
			<view class="btn" @click="showAd">
				<image class="image" src="../../static/image/video.png"></image>
				<text>查看结果</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mid: '',
				selected: null, // 用于控制样式的状态 
				userSurplusNum: 0, //金币
				quesId: '', //题目id
				quesType: '',
				quesSubject: '',
				quesData: {
					quesSubject: '情感',
					quesTitle: '颜色透露出男人的性需要',
					quesContent: '看看男人喜欢什么颜色，就知道他色不色喽！男人不像女人，容易被流行趋势影响，而改变自己喜欢的色彩，换句话说，男人通常会比较执着于他喜欢的颜色，一生中难得改变几回，因此，男人无形中也似乎比较单纯明白，而较易的悄悄透露出他的个性和情感秘密。美女好好看看你的男友喜欢什么颜色？<BR>',
					ques_answer: '',
					quesOpa: 'A.喜欢白色的男人',
					quesOpb: 'B.喜欢灰色的男人',
					quesOpc: 'C.喜欢咖啡色的男人',
					quesOpd: 'D.喜欢绿色的男人',
					quesOpe: 'E.喜欢蓝色的男人',
					quesOpf: 'F.喜欢黑色的男人',
					quesOpg: '',
					quesOph: '',
					quesAnalysis: '选择A：<BR>他是个标准的完美主义者，和他无可救药的浪漫迷情的男人。回忆占据了他大部分的情思，容易依着自己的感觉和情绪游走，自恋倾向颇严重，对身边的人、事、物，总带点挑剔的口吻。他色得很有格调品味，也很罗曼蒂克，给他空间和时间，比较容易抓住他的心，温柔、体贴的情感，最能打动他的心，肉体和精神上的契合，是他所戮力追求的。<BR>选择B：<BR>他是个思想传统而又夹带着叛逆的矛盾男人；在爱情、工作、人际关系上，若遇到挫折或不顺利，通常在他表面上看不出有什幺异样，但是，内心深处，却是波涛汹涌、犹豫煎熬。他习惯活在自己的想象空间中，逃避不愉快的事情，独自享受着优游自得的境界。他很色，但色得很深情。他总是默默的付出真情，喜欢享受彼此依恋的心情，不会夸张自己的情感，容易深埋心中。<BR>选择C：他是个阳刚味十足的男人，有自己的个性和想法，平常还算随和，但是，一碰到与自己想法有差异的时刻，本质中的固执和牛脾气，马上都会爆发出来。他色得很大男人，喜欢小女人的温顺和柔情，以柔克刚，是他最招架不住的攻势，他喜欢被需要的感受，他会色得很温柔，属于那种铁汉柔情的男人。<BR>选择D：<BR>这是坦白、诚实而自然的男人，喜欢回归自然，追求平合的生活方式，不爱偏激强烈的铁腕作风，希望一切随缘，自自然然的平静过日子，比较容易满足现状，企图心不强，不太跟人计较，容易与人相处。他有点色，喜欢单纯专一的情人，享受两人世界的甜蜜，偶尔会脱离现实、胡思乱想，但对自己喜爱的对象，可以上天下海只为博她一笑，若他不爱的异性，他的态度是冷淡不失礼貌。<BR>选择E：<BR>他希望作一个有自信、品味十足的优雅男人，但是，在他内心深处却隐藏着跳跃不安的因子，使他缺乏安全感，因此，不自觉中他经常会出现艺术家的忧郁神情。对于艺术、服装、家具，他都有着与众不同的独特见解，品味特殊，喜欢享受自由自在的生活乐趣。“他看人色”也就使是说他很挑剔、自尊心又强，他绝对不会随便找一个对象就大“色”一场，这会让他觉得不舒服，因此，除非他看上或爱上某个人，他才会大胆热情的色一下，是种相当具有攻击性的色法。<BR>选择F：<BR>这是最难捉摸的善变男人，他自视甚高，自以为是，喜欢隐藏自己真性情，却又会不小心流露赤子之心；他不喜欢被人了解透视，喜欢故做神秘状；他也拥有一份强烈的疏离感和孤独寂寞，但是又坚持保有自己独特的品味和生活方式，因此，他容易活在自己的王国中，与他人保持安全距离。他很色，对于性有强烈的占有欲和需要，不过，这完全要看他的情绪而定，冷热之间，非常明显。因此，他容易沉溺于激情的享乐，但是激情过后，那冷冷的酷模样，可是对女人很痛的折磨。'
				}
			}
		},
		onShareAppMessage(option) {
			console.log(option, '分享')
			return {
				title: '甜心趣味测评·情感测评',
				desc: '你知道自己多性感吗?',
				path: '/pages/index/index?mid=' + this.mid, //+'&__id__=', // ?后面的参数会在转发页面打开时传入onLoad方法

				success() {
					console.log('转发发布器已调起，并不意味着用户转发成功，微头条不提供这个时机的回调');
				},
				fail() {
					console.log('转发发布器调起失败');
				}
			}
		},
		onShow() {
			//重新登录一次,可以获取最新的用户信息
			this.$app.miniAppLogin();
			this.devices = uni.getSystemInfoSync(true);
			this.userData = uni.getStorageSync("userInfo");
			if (this.userData) {
				this.userSurplusNum = this.userData.userSurplusNum;
			}
		},
		onLoad(option) {


			const that = this;
			this.quesId = option.quesId;
			this.quesType = option.type || '';
			this.quesSubject = option.subject || '';
			console.info(this.quesType + " 传过来的值是: " + this.quesSubject)
			if (this.quesType) {
				this.quesNext()
			}
			this.$log("quesId", this.quesId);
			if (this.quesId) {
				this.showQuesById()
			}
			if (!this.quesType && !this.quesId) {
				console.info("什么也没有,直接下一题")
				this.quesNext()
			}

			//this.$refs.uNotify.primary('请点击选项即可答题')


			//加载广告 AD
			const app = getApp()
			app.globalData.currentPage = this


			/* console.info("用户信息", this.userData)
			if (this.userData) {
				this.userSurplusNum = this.userData.userSurplusNum;
				if (this.userSurplusNum <= 0) {
					uni.showModal({
						title: '金币不足',
						content: '金币不足，您可以观看一次完整广告视频获取5金币！',
						cancelText: '先不玩了',
						confirmText: '获取金币',
						success: function(res) {
							if (res.confirm) {

								app.globalData.playAd()

							} else {

								app.globalData.ttChaping();
								//回到首页
								uni.navigateBack()
							}
						}


					})
				}
			} */

		},

		onReady() {
			// 创建音频上下文  
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.src = ''; // 替换为你的音乐文件 URL  
			//this.getBanner();
			// 播放报错的事件监听
			this.innerAudioContext.onError((res) => {
				console.log(res);
			});
		},
		methods: {

			// 播放音乐
			playMusic(src) {
				console.info(src);
				this.innerAudioContext.src = src;
				this.innerAudioContext.play();
			},
			Toggle(numIndex) {

				this.selected = numIndex; // 更新选中的项  ; // 切换 isActive 状态  
				let that = this;
				//console.info(numIndex + "==============" + this.data.quesAnswer);

				// 选择的答案,记录到后台,查看历史记录
				this.quesData.quesAnswer = numIndex;

				this.panduan(numIndex)



			},

			// 显示广告
			panduan() {

				if (this.userData) {
					this.userSurplusNum = this.userData.userSurplusNum;
					if (this.userSurplusNum < 5) {
						uni.showModal({
							title: '查看结果',
							content: '观看一次视频广告后免费查看分析',
							success(res) {
								if (res.confirm) {
									const app = getApp()
									app.globalData.playAd()
								}
							}
						})
					} else {
						// 扣除金币
						this.userSurplusNum -= 5;
						this.useScore(5);
						//直接查看结果
						this.closeAdFunction();
					}
				} else {
					this.$app.alert('测评失败,请重新运行小程序');
				}




			},
			showAd() {
				this.panduan()

			},
			//用户观看完广告
			closeAdFunction() {
				this.recordQues();
				console.info('用户观看完成广告', this.quesId)
				uni.navigateTo({
					url: '/pages/detail/analysis?quesId=' + this.quesId
				});


			},
			//用户取消广告
			cancelAdFunction() {
				console.log('用户取消')
				/* setTimeout(() => {
					uni.showToast({
						title: '坚持一下,答案就出来啦！',
						icon: 'none'
					}, 15000)
				}) */
				let that = this
				uni.showModal({
					title: '用户取消',
					content: '在坚持一下下就好啦!',
					showCancel: false,
					success() {
						//that.showCancel();
					}
				})
			},
			// 查询题目
			showQuesById() {
				let urlPost = this.$app.apiPath.dati.showQuestionById + "?quesId=" + this.quesId;
				let key = "quesId_" + this.quesId;
				if (this.aCache.has(key)) {
					this.quesData = this.aCache.get(key)
					this.$log('使用缓存')
				} else {
					this.$log('后台查询')
					this.$app.post(urlPost, {}).then(res => {

						if (res.code == 200) {
							this.quesData = res.data;
							// 加入缓存,一个小时
							this.aCache.add(key, res.data);
						} else {
							this.$refs.uNotify.primary('网络错误,请重新进入小程序')
						}

					})
				}
				this.showNext = false;
			},
			quesNext() {
				// 方法执行完毕，重置标志
				this.isExecuting = false;
				let urlPost = this.$app.apiPath.dati.showQuestionNext + '?type=' + this.quesType + '&subject=' + this
					.quesSubject;

				this.$app.post(urlPost, {}).then(res => {
					console.info("类型题目", res);
					if (res.code == 200) {
						this.quesData = res.data;
						this.quesId = res.data.id;
						console.info('给quesId', this.quesId);
						//this.$refs.uNotify.primary('请点击选项即可答题') 
					} else {
						this.$refs.uNotify.primary('网络错误,请重新进入小程序')
					}

				})

				this.showNext = false;
				//清空选中
				this.selected = null;
			},
			// 减分
			useScore(num) {
				// 直接扣除5积分
				let urlPost = this.$app.apiPath.common.useScoreNum + "?score=" + num;
				this.$app.post(urlPost, {}).then(res => {

					if (res.code == 200) {

					} else {
						this.$refs.uNotify.primary('网络错误,请重新进入小程序')
					}

				})
			},
			// 加分
			plusScore(score) {
				let urlPost = this.$app.apiPath.common.plusScore + '?score=' + score;
				this.$app.post(urlPost, {}).then(res => {

					if (res.code == 200) {

					} else {
						this.$refs.uNotify.primary('网络错误,请重新进入小程序')
					}

				})
			},
			// 连续答对题目
			plusRight() {
				let urlPost = this.$app.apiPath.dati.setContinuRight;
				let datass = {
					"score": this.userSurplusNum,
					"rightCount": this.rightCount
				}
				this.$app.post(urlPost, datass).then(res => {

					if (res.code == 200) {
						console.log('同步答对题目成功');
					} else {
						this.$refs.uNotify.primary('网络错误,请重新进入小程序')
					}

				})
			},

			// 答对的题目记录
			recordQues() {
				let devs = this.devices.brand + "_" +
					this.devices.model + "_" +
					this.devices.platform;
				let urlPost = this.$app.apiPath.dati.record;
				let datass = {
					"quesId": this.quesId,
					"status": 1,
					"devices": devs,
					"clientVersion": this.devices.appName + "_" + this.devices.version,
					"quesTitle": this.quesData.quesTitle,
					"quesAnswer": this.quesData.quesAnswer
				}
				this.$app.post(urlPost, datass).then(res => {

					if (res.code == 200) {
						console.log('同步答对题目成功');
					} else {
						this.$refs.uNotify.primary('网络错误,请重新进入小程序')
					}

				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 5px;
		background-color: $uni-color-primary ;

		background-image: url('https://liandyao.com/upload/app/images/quweiceping/detail01.jpg');

		justify-content: center;
		align-items: center;
		min-height: 100vh;
		/* 确保容器至少填充整个视口 */

		/* 设置背景图片 */
		background-size: cover;
		/* 使背景图片覆盖整个容器 */
		background-position: center;
		/* 背景图片居中 */
	}

	.ques_content {
		padding-top: 20px;

		.header {
			display: flex;
			/* 使用 Flexbox */
		}



		.ques_subject {
			margin-left: -10px;
			height: 40px;
			width: 100px;
			color: #ffffffcc;
			background: #ff4635;
			border-radius: 0px 30px 30px 0px;
			justify-content: center;
			display: flex;
			align-items: center;
			/* 垂直居中 */
			justify-content: center;
			/* 水平居中（可选） */
			font-size: 15px;

		}

		.ques_subject1 {
			margin-left: 100px;
			height: 40px;
			width: 100px;
			color: #ffffffcc;
			background: #ff55ff;
			border-radius: 0px 30px 30px 0px;
			justify-content: center;
			display: flex;
			align-items: center;
			font-weight: bold;
			/* 垂直居中 */
			justify-content: center;
			/* 水平居中（可选） */
			font-size: 15px;
		}

		.ques_gold {
			justify-content: center;
			display: flex;
			margin-left: auto;
			align-items: center;


			/* 将该元素推到右边 */
			.gold_text {
				color: #ffffff;
				font-size: 20px;
				margin-right: 5px;
				font-weight: bold;
			}

			.image {

				width: 30px;
				height: 30px;
			}
		}

		.title {

			background-color: #ebd3eaee;
			margin: 20px;
			border-radius: 10px 10px 0px 0px;
			padding: 10px;


			.big {
				width: 100%;
				font-size: 24px;
				font-weight: bold;
				padding: 10px 0px 10px 0px;
				border-bottom: 1px solid #cc7cce;
			}

			.content {
				margin-top: 10px;
				line-height: 30px;
				font-size: 17px;
			}
		}


	}

	.ques_option {

		margin: 20px;

		.answers {
			background-color: #ffffffcc;
			padding: 5px;
			border-radius: 5px 0 5px 5px;


		}



	}

	.select {

		height: 40px;
		width: 100px;
		background-color: #ffffffcc;
		color: #5b1d75;
		border-radius: 5px 5px 0 0px;

		border-bottom: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		font-weight: bold;
	}

	.answer {
		width: 200px;
		margin: 0px auto;
		height: 160px;

		.image {
			width: 25px;
			height: 20px;
			margin-right: 10px;
		}

		.btn {
			margin-top: 16px;
			font-weight: bold;
			width: 198px;
			height: 60px;
			border: 1px solid #f3cdec;
			background: linear-gradient(-30deg, rgba(151, 32, 255, 1.0), rgba(170, 85, 255, 1.0));
			box-shadow: 0px 4px 10px 0px rgba(184, 69, 255, 0.5);
			border-radius: 30px;
			color: rgba(255, 255, 255, 1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}






	/* 选项的样式 */


	/* 应用于包含.indexBox和.indexContent的父容器 */
	.mentalList {
		display: flex;
		/* 启用Flexbox布局 */
		align-items: center;
		/* 子项在交叉轴上的对齐方式，这里设置为居中，可以根据需要调整 */

		/* 将项对齐到顶部 */
		border: 1px solid #ccc;
		/* 边框 */
		border-radius: 5px;
		/* 边框圆角 */
		background: linear-gradient(to bottom right, #ebd3eaee, #e6a6ffee);
		margin-bottom: 12px;

		min-height: 60px;

		margin-top: 18px;
		color: #5b1d75;
	}

	.mentalListActive {
		display: flex;
		/* 启用Flexbox布局 */
		align-items: center;
		/* 子项在交叉轴上的对齐方式，这里设置为居中，可以根据需要调整 */

		/* 将项对齐到顶部 */
		border: 1px solid #ccc;
		/* 边框 */
		border-radius: 5px;
		/* 边框圆角 */
		background: linear-gradient(to bottom right, #eb448fee, #c83da3ee);
		margin-bottom: 12px;

		min-height: 60px;

		margin-top: 18px;
		color: #fae9fe;
	}

	/* .indexBox的样式 */
	.indexBox {
		/* 根据需要设置宽度、高度、内边距等 */
		width: 40px;
		/* 示例宽度 */
		height: 70px;
		line-height: 80px;
		text-align: center;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to bottom right, #9720ff, #c02dd3);
		/* 背景色 */
		border-radius: 10% 30px 10% 0%;
		/* 圆形边框 */
		font-size: 20px;
		color: #fff;
		font-family: '微软雅黑';
		font-weight: bold;
	}

	/* .indexContent的样式 */
	.indexContent {

		/* 根据需要设置样式 */
		flex: 1;
		/* 占据剩余空间 */
		min-width: 0;
		/* 防止子元素过宽导致溢出 */
		padding: 5px;
		/* 内边距 */
		/* 其他样式，如字体大小、颜色等 */


		font-weight: bold;
		align-items: center;
		justify-content: center;

		max-height: 100px;
		/* 设置最大高度 */
		overflow: auto;
		/* 超出部分可滚动 */
		font-size: 18px;
		font-family: '微软雅黑';
	}



	.contaier {

		/* 背景图像 */
		background-size: cover;
		/* 图片覆盖整个区域 */
		background-position: center;
		/* 图片居中 */
		background-repeat: no-repeat;
		/* 不重复背景图 */
		width: 100vw;
		/* 宽度为视口宽度 */
		height: 100vh;
		/* 高度为视口高度 */
		font-family: 隶书;

		.mainBox {

			background-color: #ffffffcc;
			margin-left: 20px;
			margin-right: 20px;
			border-radius: 10px;
			padding: 10px;

		}

		.mentalTitle {


			text {
				font-size: 22px;
				font-weight: bold;
				color: #550000;

			}
		}
	}
</style>